<template>
    <div>
        <el-row>
            <el-col>
                <el-radio-group v-model="layoutDirection" size="mini">
                    <el-radio-button v-for="item in directionOptions" :label="item.value" :key="item.value">{{item.label}}</el-radio-button>
                </el-radio-group>
                <el-radio-group v-model="direction" :disabled="!active" size="mini" @change="setDirection">
                    <el-radio-button v-for="item in directionOptions" :label="item.value" :key="item.value">{{item.label}}</el-radio-button>
                </el-radio-group>
            </el-col>
            <el-col>
                <el-radio-group v-model="layoutWrap" size="mini">
                    <el-radio-button v-for="item in wrapOptions" :label="item.value" :key="item.value">{{item.label}}</el-radio-button>
                </el-radio-group>
                <el-radio-group v-model="wrap" :disabled="!active" size="mini" @change="setWrap">
                    <el-radio-button v-for="item in wrapOptions" :label="item.value" :key="item.value">{{item.label}}</el-radio-button>
                </el-radio-group>
            </el-col>
            <el-col>
                <el-input-number v-model="colValue" :disabled="!active" :min="0" :max="10" :precision="0" controls-position="right" @change="setCol"></el-input-number>
            </el-col>
            <el-col>
                <el-button-group>
                    <el-button @click="add" type="primary" size="mini" icon="el-icon-circle-plus-outline"></el-button>
                    <el-button @click="remove" type="primary" size="mini" icon="el-icon-remove-outline"></el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <GridView style="width: 800px; height: 600px;" ref="grid" :layout="layout" :direction="layoutDirection" @on-active="handleActive">
            <template #default="{ grid }">名称：{{grid.name}}</template>
        </GridView>
    </div>
</template>

<script>
import GridView from './GridView/index.vue'
let flag = 1

export default {
    components: {
        GridView
    },
    data() {
        return {
            directionOptions: [
                { label: 'x-start', value: 'row' },
                { label: 'x-end', value: 'row-reverse' },
                { label: 'y-start', value: 'column' },
                { label: 'y-end', value: 'column-reverse' },
            ],
            layoutDirection: 'row',
            direction: '',
            wrapOptions: [
                { label: 'nowrap', value: 'nowrap' },
                { label: 'wrap', value: 'wrap' },
                { label: 'wrap-reverse', value: 'wrap-reverse' },
            ],
            layoutWrap: 'row',
            wrap: '',
            layout: [],
            colValue: 0,
            active: null
        }
    },
    watch: {
        layout: {
            deep: true,
            handler() {
                console.log('layout change');
            }
        }
    },
    methods: {
        add() {
            if (this.active) {
                this.active.children.push({
                    id: `${flag}`,
                    name: `${flag}`,
                    direction: 'row',
                    wrap: 'nowrap',
                    col: 0,
                    children: []
                })
            } else {
                this.layout.push({
                    id: `${flag}`,
                    name: `${flag}`,
                    direction: 'row',
                    wrap: 'nowrap',
                    col: 0,
                    children: []
                })
            }
            ++flag
        },
        remove() {
            if (this.active) {
                this.active.children.pop()
            } else {
                this.layout.pop()
            }
        },
        handleActive(item) {
            console.log('active', item);
            if (item === this.active) {
                this.active = null
                this.$refs.grid.setCurrentItem(null)
            } else {
                this.active = item
            }
            this.direction = item ? item.direction : null
            this.wrap = item ? item.wrap : null
            this.colValue = item ? item.col : null
        },
        setDirection() {
            if (!this.direction) return;
            this.$refs.grid.setDirection(this.direction)
        },
        setWrap() {
            if (!this.wrap) return;
            this.$refs.grid.setWrap(this.wrap)
        },
        setCol() {
            if (typeof this.colValue !== 'number') return;
            this.$refs.grid.setCol(this.colValue)
        }
    }
}
</script>

<style>

</style>
